
import React, {Component} from 'react';
import {View, Text, TouchableOpacity, Colors} from 'react-native-ui-lib';
import {TestCase, TestSuite} from '@rnoh/testerino';
import {Alert} from 'react-native';

class TouchableOpacityTestScreen extends Component {
  state = {
    count: 0,
    toggleState: false,
    throttleCount: 0,
    customValueResult: '',
  };

  increment = () => {
    this.setState({count: this.state.count + 1});
  };

  toggle = () => {
    this.setState({toggleState: !this.state.toggleState});
  };

  throttleIncrement = () => {
    this.setState({throttleCount: this.state.throttleCount + 1});
  };

  handleCustomValue = (props) => {
    this.setState({customValueResult: JSON.stringify(props.customValue)});
  };

  render() {
    return (
      <TestSuite name="TouchableOpacity">
        {/* 1. activeBackgroundColor */}
        <TestCase itShould="activeBackgroundColor: 按下时显示红色背景">
          <View centerH padding-10>
            <TouchableOpacity activeBackgroundColor={Colors.red30} padding-10>
              <Text text60>按下变红</Text>
            </TouchableOpacity>
          </View>
        </TestCase>
        <TestCase itShould="activeBackgroundColor: 按下时显示蓝色背景">
          <View centerH padding-10>
            <TouchableOpacity activeBackgroundColor={Colors.blue30} padding-10>
              <Text text60>按下变蓝</Text>
            </TouchableOpacity>
          </View>
        </TestCase>

        {/* 2. backgroundColor */}
        <TestCase itShould="backgroundColor: 设置静态背景色为绿色">
          <View centerH padding-10>
            <TouchableOpacity backgroundColor={Colors.green30} padding-10>
              <Text text60 white>绿色背景</Text>
            </TouchableOpacity>
          </View>
        </TestCase>
        <TestCase itShould="backgroundColor: 设置静态背景色为橙色">
          <View centerH padding-10>
            <TouchableOpacity backgroundColor={Colors.orange30} padding-10>
              <Text text60 white>橙色背景</Text>
            </TouchableOpacity>
          </View>
        </TestCase>

        {/* 3. customValue */}
        <TestCase itShould="customValue: 传递字符串并在回调中获取">
          <View centerH padding-10>
            <TouchableOpacity
              customValue="Hello World"
              onPress={this.handleCustomValue}
              padding-10
              backgroundColor={Colors.grey70}>
              <Text text60>传递字符串</Text>
            </TouchableOpacity>
          </View>
        </TestCase>
        <Text style={{fontWeight: 'bold', color: '#e74c3c', fontSize: 16}}>
          接收到的值: <Text style={{fontWeight: 'bold', color: '#007AFF', fontSize: 16}}>{this.state.customValueResult}</Text>
        </Text>
        <TestCase itShould="customValue: 传递对象并在回调中获取">
          <View centerH padding-10>
            <TouchableOpacity
              customValue={{id: 1, type: 'admin'}}
              onPress={this.handleCustomValue}
              padding-10
              backgroundColor={Colors.grey70}>
              <Text text60>传递对象</Text>
            </TouchableOpacity>
          </View>
        </TestCase>

        {/* 4. onPress */}
        <TestCase itShould="onPress: 触发计数器增加">
          <View centerH padding-10>
            <TouchableOpacity onPress={this.increment} padding-10 backgroundColor={Colors.grey80}>
              <Text text60>点击 +1</Text>
            </TouchableOpacity>
            <Text text60>Count: {this.state.count}</Text>
          </View>
        </TestCase>
        <TestCase itShould="onPress: 触发状态切换 (Toggle)">
          <View centerH padding-10>
            <TouchableOpacity onPress={this.toggle} padding-10 backgroundColor={Colors.grey80}>
              <Text text60>点击切换状态</Text>
            </TouchableOpacity>
            <Text text60>State: {this.state.toggleState ? 'ON' : 'OFF'}</Text>
          </View>
        </TestCase>

        {/* 5. recorderTag */}
        <TestCase itShould="recorderTag: 设置为 'mask' (无视觉效果，仅用于录制标记)">
          <View centerH padding-10>
            <TouchableOpacity recorderTag={'mask'} padding-10 backgroundColor={Colors.violet70}>
              <Text text60 white>Mask Tag</Text>
            </TouchableOpacity>
          </View>
        </TestCase>
        <TestCase itShould="recorderTag: 设置为 'unmask' (无视觉效果，仅用于录制标记)">
          <View centerH padding-10>
            <TouchableOpacity recorderTag={'unmask'} padding-10 backgroundColor={Colors.violet70}>
              <Text text60 white>Unmask Tag</Text>
            </TouchableOpacity>
          </View>
        </TestCase>

        {/* 6. style */}
        <TestCase itShould="style: 自定义圆角和边框">
          <View centerH padding-10>
            <TouchableOpacity
              style={{
                borderRadius: 20,
                borderWidth: 2,
                borderColor: Colors.blue10,
                padding: 10,
              }}>
              <Text text60>圆角边框样式</Text>
            </TouchableOpacity>
          </View>
        </TestCase>
        <TestCase itShould="style: 自定义阴影和外边距">
          <View centerH padding-10>
            <TouchableOpacity
              style={{
                backgroundColor: 'white',
                shadowColor: '#000',
                shadowOffset: {width: 0, height: 2},
                shadowOpacity: 0.25,
                shadowRadius: 3.84,
                elevation: 5,
                padding: 10,
                margin: 10,
              }}>
              <Text text60>阴影样式</Text>
            </TouchableOpacity>
          </View>
        </TestCase>

        {/* 7. throttleTime */}
        <TestCase itShould="throttleTime: 2000ms 节流 (2秒内只能增加一次)">
          <View centerH padding-10>
            <TouchableOpacity
              throttleTime={2000}
              onPress={this.throttleIncrement}
              padding-10
              backgroundColor={Colors.yellow70}>
              <Text text60>2秒节流点击</Text>
            </TouchableOpacity>
          </View>
        </TestCase>
        <Text style={{fontWeight: 'bold', color: '#e74c3c', fontSize: 16}}>
          执行次数: <Text style={{fontWeight: 'bold', color: '#007AFF', fontSize: 16}}>{this.state.throttleCount}</Text>
        </Text>
        <TestCase itShould="throttleTime: 500ms 节流 (0.5秒内只能增加一次)">
          <View centerH padding-10>
            <TouchableOpacity
              throttleTime={500}
              onPress={this.throttleIncrement}
              padding-10
              backgroundColor={Colors.yellow70}>
              <Text text60>0.5秒节流点击</Text>
            </TouchableOpacity>
          </View>
        </TestCase>

        {/* 8. throttleOptions */}
        <TestCase itShould="throttleOptions: {leading: true, trailing: false} (立即执行)">
          <View centerH padding-10>
            <TouchableOpacity
              throttleTime={1000}
              throttleOptions={{leading: true, trailing: false}}
              onPress={() => Alert.alert('Leading Edge')}
              padding-10
              backgroundColor={Colors.cyan70}>
              <Text text60>Leading Edge</Text>
            </TouchableOpacity>
          </View>
        </TestCase>
        <TestCase itShould="throttleOptions: {leading: false, trailing: true} (延迟执行)">
          <View centerH padding-10>
            <TouchableOpacity
              throttleTime={1000}
              throttleOptions={{leading: false, trailing: true}}
              onPress={() => Alert.alert('Trailing Edge')}
              padding-10
              backgroundColor={Colors.cyan70}>
              <Text text60>Trailing Edge</Text>
            </TouchableOpacity>
          </View>
        </TestCase>

        {/* 9. useNative */}
        <TestCase itShould="useNative: true (使用原生实现)">
          <View centerH padding-10>
            <TouchableOpacity useNative={true} padding-10 backgroundColor={Colors.grey60}>
              <Text text60>Native Implementation</Text>
            </TouchableOpacity>
          </View>
        </TestCase>
        <TestCase itShould="useNative: false (使用 JS 实现)">
          <View centerH padding-10>
            <TouchableOpacity useNative={false} padding-10 backgroundColor={Colors.grey60}>
              <Text text60>JS Implementation</Text>
            </TouchableOpacity>
          </View>
        </TestCase>

        {/* 10. activeScale */}
        <TestCase itShould="activeScale: 0.9 (按下时轻微缩小)">
          <View centerH padding-10>
            <TouchableOpacity activeScale={0.9} padding-10 backgroundColor={Colors.purple60}>
              <Text text60 white>Scale 0.9</Text>
            </TouchableOpacity>
          </View>
        </TestCase>
        <TestCase itShould="activeScale: 0.2 (按下时大幅缩小)">
          <View centerH padding-10>
            <TouchableOpacity activeScale={0.2} padding-10 backgroundColor={Colors.purple60}>
              <Text text60 white>Scale 0.2</Text>
            </TouchableOpacity>
          </View>
        </TestCase>
      </TestSuite>
    );
  }
}

export default TouchableOpacityTestScreen;